<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Remdator Examples</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../jquery-ext.js" type="text/javascript"></script>
<script src="../../remdator-exceptions.js" type="text/javascript"></script>
<script src="../../DataElement.js" type="text/javascript"></script>
<script src="../../SingleDataElement.js" type="text/javascript"></script>
<script src="../../DataStore.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
	//logging functions
	function log($message, $bold)
	{
		if ($bold)
		{
			$("#message").append("<b>"+$message + "</b><br />");
		}
		else
		{
			$("#message").append($message + "<br />");
		}
	}
	function clearlog()
	{
		$("#message").html("");
	}
	//end logging functions
	
	
	
	var $outputToArgsReturnNothing = false;
	var $datastore = null;

	function create()
	{
		clearlog();
		
		$datastore = new $.remdator.DataStore({
			initValue : { text : "uninitialized", file : "uninitialized" },
			initLoaded : false,
			defaultAjaxOperation : { //Default operation properties which allow you to leave out some details in ajaxOperations.
				errorChecker : function($ajaxOutputArgs) {
					log("Now inside default error checker function.");
					log("<br />");
					
					if ($ajaxOutputArgs.output["error"] === true)
					{
						log("Server signalled an error so a RemoteError exception was thrown.");
						log("<br />");
						
						throw new $.remdator.RemoteError({ message : "Server returned an error!" }); //Add also "data" attribute to specify extra information such as which fields are invalide.
					}
				},
				success : function($ajaxOutputArgs) {
					log("Now inside default success function.");
					log("Data sent to server: " + $ajaxOutputArgs.requestData["new_text"]);
					log("Data received from server: " + $ajaxOutputArgs.output["new_text"]);
					log("<br />");
				
					$ajaxOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null }); //By default you can call the data store's load operation to reload the remote data.
				},
				settings : { type : "POST", dataType : "json" }
			},
			ajaxOperations : {
				"load" : {
					url : "server/load.php",
					//You can specify a errorChecker : function($ajaxOutputArgs) {} function here.
					success : function($ajaxOutputArgs) {
						log("Now inside success function of load.");
						log("Data sent to server: " + $ajaxOutputArgs.requestData["suffix"]);
						log("Data received from server: " + $ajaxOutputArgs.output["text"] + " | " + $ajaxOutputArgs.output["file"]);
						log("<br />");
						
						$ajaxOutputArgs.source.setValue({ value : {
							text : $ajaxOutputArgs.output["text"],
							file : $ajaxOutputArgs.output["file"]
						} });
					}
				},
				"changetext" : {
					url : "server/changetext.php",
					success : function($ajaxOutputArgs) {
						log("Now inside success function of change text.");
						log("Data sent to server: " + $ajaxOutputArgs.requestData["new_text"]);
						log("Data received from server: " + $ajaxOutputArgs.output["new_text"]);
						log("<br />");
						
						$ajaxOutputArgs.source.setValue({ value : {
							text : $ajaxOutputArgs.output["new_text"],
							file : $ajaxOutputArgs.source.getValue()["file"]
						} });
						
						//We could also use $ajaxOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null }); if the script doesn't return the new value.
					}
				},
				"changetextreload" : {
					url : "server/changetext.php",
					success : function($ajaxOutputArgs) {
						log("Now inside success function of change text reload.");
						log("Data sent to server: " + $ajaxOutputArgs.requestData["new_text"]);
						log("Data received from server: " + $ajaxOutputArgs.output["new_text"]);
						log("<br />");
						
						//Since this is exactly what the default operation's success does, we can leave this success function out if we wanted.
						$ajaxOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null });
					}
				}
			},
			
			defaultFormOperation : {
				errorChecker : function($formOutputArgs) {
					if ($formOutputArgs.output["error"] === true)
					{
						log("Server signalled an error so a RemoteError exception was thrown.");
						log("<br />");
						
						throw new $.remdator.RemoteError({ message : "Server returned an error!" }); //Add also "data" attribute to specify extra information such as which fields are invalide.
					}
				},
				success : function($formOutputArgs) {
					$ajaxOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null }); //By default you can call the data store's load operation to reload the remote data.
				},
				settings : {
					form : $("form"),
					iframe : $("form iframe"),
					dataType : "json",
					preSubmit : function($preSubmitArgs) {
						//A listener for just before the form submits. Use it to fill any hidden fields, for example.
						log("Now inside preSubmit function.");
						log("<br />");
					}
				}
			},
			
			formOperations : {
				"changefile" : {
					url : "server/changefile.php",
					//You can specify a errorChecker : function($formOutputArgs) {} function here.
					success : function($formOutputArgs) {
						log("Now inside success function of change file.");
						log("Data sent to server: (see form)");
						log("Data received from server: " + $formOutputArgs.output["new_file"]);
						log("<br />");
					
						$formOutputArgs.source.setValue({ value : {
							text : $formOutputArgs.source.getValue()["text"],
							file : $formOutputArgs.output["new_file"]
						} });
						
						//We could also use $formOutputArgs.source.callAjaxOperation({ operationName : "load", requestData : null }); if the script doesn't return the new value.
					},
					settings : {
						//You can specify other form settings options here.
						preSubmit : function($formOutputArgs) {
							$('input[name="other"]').val("");
						}
					}
				},
				"changefileerror" : {
					url : "server/changefile.php",
					//You can specify a errorChecker : function($formOutputArgs) {} function here.
					//You can specify a success : function($formOutputArgs) {} function here.
					settings : {
						//You can specify other form settings options here.
						preSubmit : function($formOutputArgs) {
							$('input[name="other"]').val("simulate error");
						}
					}
				}
			}
		});
		
		$datastore.addChangeListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				
				log("Change listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue()["text"] + " | " + $source.getValue()["file"]);
				log("<br />");
			}
		});
		
		$datastore.addRemoteLoadingListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				var $operationName = $eventArgs.operationName;
				
				log("Ajax Loading listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue()["text"] + " | " + $source.getValue()["file"]);
				log("Operation of remdator object that fired event: " + $operationName);
				log("<br />");
			}
		});
		
		$datastore.addRemoteReadyListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				var $operationName = $eventArgs.operationName;
				
				log("Ajax Ready listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue()["text"] + " | " + $source.getValue()["file"]);
				log("Operation of remdator object that fired event: " + $operationName);
				log("<br />");
			}
		});
		
		$datastore.addRemoteErrorListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				var $operatoinName = $eventArgs.operationName;
				var $error = $eventArgs.error;
				var $data = $eventArgs.data;
				
				log("Ajax Error listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue()["text"] + " | " + $source.getValue()["file"]);
				log("Operation of remdator object that fired event: " + $operatoinName);
				log("Error message: " + $error);
				log("<br />");
			}
		});
		
		log("Created data store", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxLoad()
	{
		clearlog();
		
		var $suffix = $("#suffix").val();
		
		$datastore.callAjaxOperation({ operationName : "load", requestData : { suffix : $suffix } });
		
		log("Remotely loaded value of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxLoadLast()
	{
		clearlog();
		
		$datastore.callAjaxOperation({ operationName : "load", requestData : null }); //Reuse the last request data used for the load operation.
		
		log("Remotely loaded value of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxChangeText()
	{
		clearlog();
		
		var $new_text = $("#new_text").val();
		
		$datastore.callAjaxOperation({ operationName : "changetext", requestData : { new_text : $new_text } });
		
		log("Remotely changed text of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxChangeTextReload()
	{
		clearlog();
		
		var $new_text = $("#new_text").val();
		
		$datastore.callAjaxOperation({ operationName : "changetextreload", requestData : { new_text : $new_text } });
		
		log("Remotely changed text (with reload) of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function formChangeFile()
	{
		clearlog();
		
		$datastore.callFormOperation({ operationName : "changefile" }); //Request data is whatever is in the form.
		
		log("Remotely changed file of data store.", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxLoadError()
	{
		clearlog();
		
		$datastore.callAjaxOperation({ operationName : "load", requestData : { suffix : "simulate error" } });
		
		log("Remotely loaded value of data store (error).", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function ajaxChangeTextError()
	{
		clearlog();
		
		$datastore.callAjaxOperation({ operationName : "changetext", requestData : { new_text : "simulate error" } });
		
		log("Remotely changed text of data store (error).", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	function formChangeFileError()
	{
		clearlog();
		
		$datastore.callFormOperation({ operationName : "changefileerror" });
		
		log("Remotely changed file of data store (error).", true);
		log("Value of data store: " + $datastore.getValue()["text"] + " | " + $datastore.getValue()["file"]);
		log("<br />");
	}
	
	$(document).ready(function() {
		create();
	});
//-->
</script>  
</head>
<body>
	<div id="message"></div>
	<input type="button" value="Recreate data store" onclick="create();" /><br />
	<input type="button" value="Remotely load value from load.php using given suffix" onclick="ajaxLoad();" /><br />
	<input type="button" value="Remotely load value from load.php using last suffix" onclick="ajaxLoadLast();" /><br />
	<input type="button" value="Remotely change text through changetext.php using given new text and update local value" onclick="ajaxChangeText();" /><br />
	<input type="button" value="Remotely change text through changetext.php using given new text and reload local value from load.php using the last suffix (don't use after error simulation as it will ask the server to simulate the error again)" onclick="ajaxChangeTextReload();" /><br />
	<input type="button" value="Remotely change file at changefile.php using given new file and update local value" onclick="formChangeFile();" /><br />
	<input type="button" value="Remotely load value from load.php and simulate a server error" onclick="ajaxLoadError();" /><br />
	<input type="button" value="Remotely change text through changetext.php and simulate a server error" onclick="ajaxChangeTextError();" /><br />
	<input type="button" value="Remotely change file through changefile.php and simulate a server error" onclick="formChangeFileError();" /><br />
	Suffix: <input type="text" id="suffix" /><br />
	New Text: <input type="text" id="new_text" /><br />
	<form enctype="multipart/form-data" method="POST">
		<input name="other" type="hidden" />
		New File: <input name="newfile" type="file" />
		<iframe name="form_iframe"></iframe>
		(iframe would be hidden using "display:none;")
	</form>
</body>
</html>